<template>
  <a-space direction="vertical">
    <a-card title="监控产品管理配置">
      <a-form ref="searchRef" name="searchBar" :model="searchFormState" :labelCol="{ span: 5, offset: 1 }"
        @finish="handleSearch">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item name="productName" label="产品名称">
              <a-input v-model:value="searchFormState.productName" placeholder=""></a-input>
            </a-form-item>
          </a-col>
            <a-col :span="8">
              <a-form-item name="bizType" label="业务类型">
                <a-select v-model:value="searchFormState.bizType" placeholder="请选择业务类型" :loading="bizTypeLoading" allowClear>
                  <a-select-option v-for="dictDate in bizTypeList" :key="dictDate.dictType" :value="dictDate.dictValue">
                    {{ dictDate.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="text-align: right">
            <a-button type="primary" html-type="submit" :loading="searchLoading">搜索</a-button>
            <a-button style="margin: 0 8px" @click="() => searchRef?.resetFields()">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card>
      <a-space>
        <!-- 修复：新增按钮绑定正确的分步弹窗事件 -->
        <a-button @click="showAddStepModal" type="primary"><template #icon> <appstore-add-outlined />
          </template>新增</a-button>
        <a-button @click="showEditStepModal"
          style="background-color: #f6ffed; color: #237804; border-color: #b7eb8f"><template #icon>
            <form-outlined />
          </template>修改</a-button>
        <a-button @click="showDelete" type="primary" danger><template #icon> <delete-outlined />
          </template>删除</a-button>
      </a-space>
    </a-card>
    <a-card title="查询结果">
      <a-table class="ant-table-striped" :rowClassName="
            (_record: any, index: number) => (index % 2 === 1 ? 'table-striped' : null)
          " :columns="columns" :data-source="data" rowKey="id" :loading="searchLoading" :rowSelection="rowSelection"
        @change="
            (pagination: any) => {
              handleSearch(pagination);
            }
          " :pagination="{
            position: [`bottomRight`],
            showSizeChanger: true,
            showQuickJumper: true,
            current: pageNum,
            pageSize,
            total: total,
            showTotal: (total: any) => `总计 ${total} 条记录`,
          }">
        <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex === 'name'">
            <a>{{ text }}</a>
          </template>
        </template>
      </a-table>
    </a-card>
    <!-- 分步新增弹窗 -->
    <a-modal ref="stepModalRef" v-model:visible="stepVisible" :title="getStepTitle"
      :okButtonProps="{ disabled: !isStepValid }" @ok="handleStepOk" @cancel="handleStepCancel"
      style="width: 1200px; top: 20px;">
      <!-- 分步弹窗内的步骤条（无需改结构，仅保留原写法） -->
      <div class="step-root">
        <a-steps :current="currentStep" labelPlacement="vertical">
          <!-- 每个 a-step 必须添加 step-item 类名 -->
          <a-step class="step-item" title="产品基本信息配置" description="填写产品基础信息" />
          <a-step class="step-item" title="报文模板配置" description="配置报文模板等" />
          <a-step class="step-item" title="确认规则配置" description="设置确认规则" />
          <a-step class="step-item" title="清结算规则配置" description="配置清结算规则" />
        </a-steps>
      </div>
      <!-- 分步表单内容（通过v-if控制显示） -->
      <a-form ref="stepFormRef" :model="stepForm" :labelCol="{ span: 5, offset: 1 }" name="step_form"
        style="margin-top: 24px">
        <!-- 步骤1：产品基本信息配置 -->
        <div v-if="currentStep === 0">
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="productCode" label="产品编号" :rules="[{ required: true, message: '请输入产品编号' }]">
                <a-input v-model:value="stepForm.productCode" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="productName" label="产品名称" :rules="[{ required: true, message: '请输入产品名称' }]">
                <a-input v-model:value="stepForm.productName" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="channelId" label="成交渠道" :rules="[{ required: true, message: '请选择成交渠道' }]">
                <a-select v-model:value="stepForm.channelId" placeholder="请选择成交渠道" :loading="transChannelLoading"
                  allowClear>
                  <a-select-option v-for="transChannel in transChannelList" :key="transChannel.transChannelCode"
                    :value="transChannel.transChannelCode">
                    {{ transChannel.transChannelName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="bizType" label="业务类型" :rules="[{ required: true, message: '请选择业务类型' }]">
                <a-select v-model:value="stepForm.bizType" placeholder="请选择业务类型" :loading="bizTypeLoading" allowClear>
                  <a-select-option v-for="dictDate in bizTypeList" :key="dictDate.dictType" :value="dictDate.dictValue">
                    {{ dictDate.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <!-- 步骤2：报文模板配置 -->
        <div v-if="currentStep === 1">
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="messageTemp" label="报文模板" :rules="[{ required: true, message: '请选择报文模板' }]">
                <a-input v-model:value="stepForm.messageTemp" placeholder="请选择报文模板" readonly
                  @click="showMessageTempModal" style="cursor: pointer" />
                <div v-if="selectedMessageTempName" style="margin-top: 4px; font-size: 12px; color: #666">
                  模板名称：{{ selectedMessageTempName }}
                </div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="uniquenessRole" label="唯一性判断规则" :rules="[{ required: true, message: '请选择唯一性判断规则' }]">
                <a-input v-model:value="stepForm.uniquenessRole" placeholder="请选择唯一性判断规则" readonly
                  @click="showUniquenessRoleModal" style="cursor: pointer" />
                <div v-if="selectedUniquenessRoleName" style="margin-top: 4px; font-size: 12px; color: #666">
                  规则名称：{{ selectedUniquenessRoleName }}
                </div>
              </a-form-item>
            </a-col>
          </a-row>

        </div>

        <!-- 步骤3：确认规则配置 -->
        <div v-if="currentStep === 2">
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="confirmMode" label="确认方式" :rules="[{ required: true, message: '请选择确认方式' }]">
                <a-select v-model:value="stepForm.confirmMode" placeholder="请选择确认方式" :loading="confirmModeLoading"
                  allowClear>
                  <a-select-option v-for="dictDate in confirmModeList" :key="dictDate.dictType"
                    :value="dictDate.dictValue">
                    {{ dictDate.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="interestRate" label="起息速度" :rules="[{ required: true, message: '请选择起息速度' }]">
                <a-select v-model:value="stepForm.interestRate" placeholder="请选择起息速度" :loading="interestRateLoading"
                  allowClear>
                  <a-select-option v-for="dictDate in interestRateList" :key="dictDate.dictType"
                    :value="dictDate.dictValue">
                    {{ dictDate.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="interestCurrency" label="起息付款币种" :rules="[{ required: true, message: '请选择起息付款币种' }]">
                <a-select v-model:value="stepForm.interestCurrency" placeholder="请选择起息付款币种" :loading="currencyLoading"
                  allowClear showSearch
                  :filterOption="(inputValue: string, option: any) => filterCurrency(inputValue, option, currencyList)">
                  <a-select-option v-for="currency in currencyList" :key="currency.currencyCode"
                    :value="currency.currencyCode">
                    {{ currency.currencyName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="settlementCurrency" label="结算币种" :rules="[{ required: true, message: '请输入结算币种' }]">
                <a-select v-model:value="stepForm.settlementCurrency" placeholder="请选择结算币种" :loading="currencyLoading"
                  allowClear showSearch
                  :filterOption="(inputValue: string, option: any) => filterCurrency(inputValue, option, currencyList)">
                  <!-- 遍历币种列表生成选项 -->
                  <a-select-option v-for="currency in currencyList" :key="currency.currencyCode"
                    :value="currency.currencyCode">
                    {{ currency.currencyName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="isConfirm" label="是否需要确认" :rules="[{ required: true, message: '请输入是否需要确认' }]">
                <a-select v-model:value="stepForm.isConfirm" placeholder="请选择是否需要确认" :loading="isConfirmLoading"
                  allowClear>
                  <!-- 遍历字典列表生成选项 -->
                  <a-select-option v-for="dictDate in isConfirmList" :key="dictDate.dictType"
                    :value="dictDate.dictValue">
                    {{ dictDate.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <!-- 步骤4：清结算规则配置 -->
        <div v-if="currentStep === 3">
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="clearingMode" label="清算方式" :rules="[{ required: true, message: '请选择清算方式' }]">
                <a-select v-model:value="stepForm.clearingMode" placeholder="清算方式" :loading="clearingModeLoading"
                  allowClear>
                  <a-select-option v-for="dictDate in clearingModeList" :key="dictDate.dictType"
                    :value="dictDate.dictValue">
                    {{ dictDate.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="settleScene" label="清结算场景" :rules="[{ required: true, message: '请输入清结算场景' }]">
                <a-select v-model:value="stepForm.settleScene" placeholder="请选择清结算场景" :loading="settleSceneLoading"
                  allowClear>
                  <!-- 遍历字典列表生成选项 -->
                  <a-select-option v-for="dictDate in settleSceneList" :key="dictDate.dictType"
                    :value="dictDate.dictValue">
                    {{ dictDate.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="accessMethod" label="清结算结果获取方式" :rules="[{ required: true, message: '请输入清结算结果获取方式' }]">
                <a-select v-model:value="stepForm.accessMethod" placeholder="请选择清结算结果获取方式"
                  :loading="transChannelLoading" allowClear>
                  <!-- 遍历渠道平台列表生成选项 -->
                  <a-select-option v-for="transChannel in transChannelList" :key="transChannel.transChannelCode"
                    :value="transChannel.transChannelCode">
                    {{ transChannel.transChannelName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="holidayType" label="节假日类型" :rules="[{ required: true, message: '请输入节假日类型' }]">
                <a-select v-model:value="stepForm.holidayType" placeholder="节假日类型" :loading="holidayTypeLoading"
                  allowClear>
                  <!-- 遍历字典列表生成选项 -->
                  <a-select-option v-for="dictDate in holidayTypeList" :key="dictDate.dictType"
                    :value="dictDate.dictValue">
                    {{ dictDate.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="holidayRule" label="节假日顺延规则" :rules="[{ required: true, message: '请输入节假日顺延规则' }]">
                <a-select v-model:value="stepForm.holidayRule" placeholder="请选择节假日顺延规则" :loading="holidayRuleLoading"
                  allowClear>
                  <!-- 遍历字典列表生成选项 -->
                  <a-select-option v-for="dictDate in holidayRuleList" :key="dictDate.dictType"
                    :value="dictDate.dictValue">
                    {{ dictDate.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="isSummerTime" label="是否夏令时" :rules="[{ required: true, message: '请输入是否夏令时' }]">
                <a-select v-model:value="stepForm.isSummerTime" placeholder="是否夏令时" :loading="isSummerTimeLoading"
                  allowClear>
                  <!-- 遍历字典列表生成选项 -->
                  <a-select-option v-for="dictDate in isSummerTimeList" :key="dictDate.dictType"
                    :value="dictDate.dictValue">
                    {{ dictDate.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="abnolmalAlert" label="异常提醒" :rules="[{ required: true, message: '请选择异常提醒' }]">
                <a-select v-model:value="stepForm.abnolmalAlert" placeholder="异常提醒" :loading="abnolmalAlertLoading"
                  allowClear>
                  <a-select-option v-for="dictDate in abnolmalAlertList" :key="dictDate.dictType"
                    :value="dictDate.dictValue">
                    {{ dictDate.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" v-if="stepForm.abnolmalAlert === '1'">
            <a-col :span="14" :offset="6">
              <a-form-item name="abnolmalAlertRole" label="异常提醒规则" :rules="[{ required: true, message: '请选择异常提醒规则' }]">
                <a-select v-model:value="stepForm.abnolmalAlertRole" placeholder="请选择异常提醒规则"
                  :loading="abnolmalAlertRoleLoading" allowClear>
                  <a-select-option v-for="dictDate in abnolmalAlertRoleList" :key="dictDate.dictType"
                    :value="dictDate.dictValue">
                    {{ dictDate.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="isClearing" label="是否需要清算" :rules="[{ required: true, message: '请输入是否需要清算' }]">
                <a-select v-model:value="stepForm.isClearing" placeholder="请选择是否需要清算" :loading="isClearingLoading"
                  allowClear>
                  <!-- 遍历字典列表生成选项 -->
                  <a-select-option v-for="dictDate in isClearingList" :key="dictDate.dictType"
                    :value="dictDate.dictValue">
                    {{ dictDate.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="14" :offset="6">
              <a-form-item name="priority" label="优先级" :rules="[{ required: true, message: '请选择优先级' }]">
                <a-select v-model:value="stepForm.priority" placeholder="请选择优先级" :loading="priorityLoading" allowClear
                  showSearch
                  :filterOption="(inputValue: string, option: any) => filterPriority(inputValue, option, priorityList)">
                  <a-select-option v-for="priority in priorityList" :key="priority.priorityNo"
                    :value="priority.priorityNo">
                    {{ priority.priorityName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

        </div>
      </a-form>

      <!-- 分步导航按钮 -->
      <template #footer>
        <div class="steps-footer">
          <a-button v-if="currentStep > 0" @click="prevStep">上一步</a-button>
          <a-button v-if="currentStep < 3" type="primary" @click="nextStep" :disabled="!isCurrentStepValidSync">
            下一步
          </a-button>
          <a-button v-if="currentStep === 3" type="primary" @click="handleStepOk">
            完成
          </a-button>
          <a-button @click="handleStepCancel">取消</a-button>
        </div>
      </template>
    </a-modal>

    <a-modal ref="messageTempModalRef" v-model:visible="messageTempModalVisible" title="选择报文模板"
      @ok="handleMessageTempConfirm" @cancel="handleMessageTempCancel" style="width: 800px; top: 20px">
      <!-- 移除搜索表单，直接展示表格 -->
      <a-table :columns="messageTempColumns" :data-source="messageTempList" rowKey="msgTemplateCode"
        :loading="messageTempLoading" :rowSelection="{
          type: 'radio',
          selectedRowKeys: [selectedMessageTempId],
          onChange: (selectedRowKeys: string[], selectedRows: { msgTemplateName: string; }[]) => {
            selectedMessageTempId = selectedRowKeys[0] as string;
            selectedMessageTempName = selectedRows[0]?.msgTemplateName || '';
          }
        }" :pagination="{
          position: ['bottomRight'],
          showSizeChanger: true,
          showQuickJumper: true,
          current: messageTempPageNum,
          pageSize: messageTempPageSize,
          total: messageTempTotal,
          showTotal: (total: any) => `总计 ${total} 条记录`
        }" @change="(pagination: any) => {
          messageTempPageNum = pagination.current;
          messageTempPageSize = pagination.pageSize;
          fetchMessageTempList();
        }" />
    </a-modal>

    <!-- 2. 唯一性判断规则选择弹窗（去掉查询条件） -->
    <a-modal ref="uniquenessRoleModalRef" v-model:visible="uniquenessRoleModalVisible" title="选择唯一性判断规则"
      @ok="handleUniquenessRoleConfirm" @cancel="handleUniquenessRoleCancel" style="width: 800px; top: 20px">
      <!-- 移除搜索表单，直接展示表格 -->
      <a-table :columns="uniquenessRoleColumns" :data-source="uniquenessRoleList" rowKey="tempId"
        :loading="uniquenessRoleLoading" :rowSelection="{
          type: 'radio',
          selectedRowKeys: [selectedUniquenessRoleId],
          onChange: (selectedRowKeys: string[], selectedRows: { tempName: string; }[]) => {
            selectedUniquenessRoleId = selectedRowKeys[0] as string;
            selectedUniquenessRoleName = selectedRows[0]?.tempName || '';
          }
        }" :pagination="{
          position: ['bottomRight'],
          showSizeChanger: true,
          showQuickJumper: true,
          current: uniquenessRolePageNum,
          pageSize: uniquenessRolePageSize,
          total: uniquenessRoleTotal,
          showTotal: (total: any) => `总计 ${total} 条记录`
        }" @change="(pagination: any) => {
          uniquenessRolePageNum = pagination.current;
          uniquenessRolePageSize = pagination.pageSize;
          fetchUniquenessRoleList();
        }" />
    </a-modal>
  </a-space>
</template>
<script lang="ts" setup>
	// base library
	// 新增：弹窗显示时强制触发 DOM 重绘（解决 Vue 渲染延迟问题）
	import { nextTick } from 'vue';
	import { LISTHEADER } from "./config"; // 从同级config.ts文件中导入表头
	import { listQuery, add, edit, del} from "@/api/pmManagement/pmMonitorProduct/pmMonitorProduct";
	import { listQuery as messageTempListQuery} from "@/api/pmManagement/pmMsgTemplate/pmMsgTemplate";
	import { listQuery as uniquenessRoleListQuery} from "@/api/pmManagement/pmUniqueValidation/pmUniqueValidation";
	import { fetchDictData, DictItem,fetchPriorityList, PriorityItem, filterPriority,fetchCurrencyList, CurrencyItem, filterCurrency, convertDictValue, TransChannelItem, fetchTransChannelList, handleTransChannelChange, ElementTypeItem, fetchElementTypeList, handleElementTypeChange } from "@/utils/utils"; // 导入公共方法和接口
	import { onMounted, watch } from "@vue/runtime-core";
	import {
		computed,
		createVNode,
		reactive,
		ref,
		toRaw,
		unref,
	} from "vue";
	import { FormInstance, message, Modal, Steps } from "ant-design-vue";
	import { ExclamationCircleOutlined, DeleteOutlined } from "@ant-design/icons-vue";

	const searchRef = ref<FormInstance>();
	let searchLoading = ref(true);
	const searchFormState : { [propName : string] : any } = reactive({});

	const columns = LISTHEADER;
	let pageNum = ref(1);
	let pageSize = ref(10);
	let total = ref(0);
	let data = ref([]);

	const ASteps = Steps;
	const AStep = Steps.Step;

	// 渠道平台列表
	const transChannelList = ref<TransChannelItem[]>([]);
	const transChannelLoading = ref(false);
	// 存储币种列表
	const currencyList = ref<CurrencyItem[]>([]);
	// 加载币种列表的loading状态
	const currencyLoading = ref(false);
	// 优先级列表
	const priorityList = ref<PriorityItem[]>([]);
	const priorityLoading = ref(false);

	const bizTypeList = ref<DictItem[]>([]);
	const bizTypeLoading = ref(false);

	const confirmModeList = ref<DictItem[]>([]);
	const confirmModeLoading = ref(false);

	const clearingModeList = ref<DictItem[]>([]);
	const clearingModeLoading = ref(false);

	const interestRateList = ref<DictItem[]>([]);
	const interestRateLoading = ref(false);

	const settleSceneList = ref<DictItem[]>([]);
	const settleSceneLoading = ref(false);

	const holidayTypeList = ref<DictItem[]>([]);
	const holidayTypeLoading = ref(false);

	const holidayRuleList = ref<DictItem[]>([]);
	const holidayRuleLoading = ref(false);

	const isSummerTimeList = ref<DictItem[]>([]);
	const isSummerTimeLoading = ref(false);

	const abnolmalAlertList = ref<DictItem[]>([]);
	const abnolmalAlertLoading = ref(false);

	const abnolmalAlertRoleList = ref<DictItem[]>([]);
	const abnolmalAlertRoleLoading = ref(false);

	const isConfirmList = ref<DictItem[]>([]);
	const isConfirmLoading = ref(false);

	const isClearingList = ref<DictItem[]>([]);
	const isClearingLoading = ref(false);

	const handleSearch = (values ?: any) => {
		searchLoading.value = true;
		console.log("Received values of form: ", values);
		console.log("searchFormState: ", searchFormState);
		let parameter = { ...searchFormState };
		if (values?.current) {
			// 分页切换
			pageNum.value = values?.current;
			pageSize.value = values?.pageSize;
		} else {
			// 搜索
			selectedRowKeys.value = [];
			selectedRows.value = [];
			pageNum.value = 1;
		}
		const requestParameters = Object.assign({}, parameter, {
			pageNum: pageNum.value,
			pageSize: pageSize.value,
		});
		console.log("loadData request parameters:", requestParameters);

		// 列表查询及条件查询
		listQuery(requestParameters).then(
			(res : {
				code : number | string;
				msg : string;
				total : number;
				rows : any;
			}) => {
				console.log("打印完整的返回信息：" + res);
				searchLoading.value = false;
				const { code, msg, total: count, rows } = res;
				console.log("接口编码：" + code);
				console.log("接口信息：" + JSON.stringify(rows, null, 2))
				if (code === 200) {
					data.value = rows;
					total.value = count;
				} else {
					total.value = 0;
					data.value = [];
					pageNum.value = 1;
					message.error(msg);
				}
			}
		);
	};
	type T = any
	// 查询出的数据表单展示后，选择数据，对选中的数据进行赋值
	const selectedRowKeys = ref<string[]>([]); // 一般存放选中数据的id，由rowKey控制，rowKey取啥字段就存啥字段的值
	const selectedRows = ref<T[]>([]); // 存放选中行的所有数据
	const onSelectChange = (changableRowKeys : string[], changableRows : T[]) => {
		console.log("选中的行ID:", selectedRowKeys);
		console.log("选中的行数据:", selectedRows);
		console.log("selectedRowKeys changed: ", changableRowKeys);
		selectedRowKeys.value = changableRowKeys;
		selectedRows.value = changableRows;
	};
	const rowSelection = computed(() => {
		return {
			selectedRowKeys: unref(selectedRowKeys),
			onChange: onSelectChange,
			hideDefaultSelections: false,
		};
	});
	enum action {
		add = "新增",
		edit = "编辑",
	}
	//const currentAction = ref(action.add);
	const visible = ref<boolean>(false);
	const modalTitleRef = ref<HTMLElement>();

	// 删除弹窗页面，选中数据后，点击删除，调用del删除方法
	const showDelete = () => {
		if (selectedRowKeys.value.length === 0) {
			message.error("请选择一条记录进行操作");
		} else {
			Modal.confirm({
				title: "请确认是否操作删除?",
				icon: createVNode(ExclamationCircleOutlined),
				okText: "删除",
				okType: "danger",
				cancelText: "取消",
				onOk() {
					console.log("selectedRows: ", toRaw(selectedRows.value[0]).id, selectedRows);
					del(selectedRowKeys.value).then((res) => {
						const { code, msg } = res;
						if (code === 200) {
							console.log("resp: ", toRaw(res));
							Modal.success({
								title: msg,
							});
							handleSearch();
						} else {
							Modal.error({
								title: msg,
							});
						}
					});
				},
				onCancel() {
					console.log("Cancel");
				},
			});
		}
	};

	const messageTempModalVisible = ref<boolean>(false);
	// 移除搜索表单引用和搜索表单数据

	interface TemplateItem {
		msgTemplateCode : string;
		msgTemplateName : string;
	}
	const messageTempList = ref<TemplateItem[]>([]);
	const messageTempPageNum = ref(1);
	const messageTempPageSize = ref(10);
	const messageTempTotal = ref(0);
	const messageTempLoading = ref(false);
	const selectedMessageTempId = ref<string>("");
	const selectedMessageTempName = ref<string>("");

	const messageTempColumns = ref([
		{ title: "模板编号", dataIndex: "msgTemplateCode", key: "msgTemplateCode", width: 150 },
		{ title: "模板名称", dataIndex: "msgTemplateName", key: "msgTemplateName", width: 250 }
	]);

	// 关闭报文模板选择弹窗
	const handleMessageTempCancel = () => {
		messageTempModalVisible.value = false;
		// 可选：保留选中状态，不清空
	};

	// 加载列表（移除搜索参数）
	const fetchMessageTempList = () => {
		messageTempLoading.value = true;
		const params = {
			// 去掉搜索条件参数，仅保留分页和必要筛选
			pageNum: messageTempPageNum.value,
			pageSize: messageTempPageSize.value,
			transChannel: stepForm.channelId // 保留渠道联动筛选（可选，根据业务需求决定是否保留）
		};
		messageTempListQuery(params).then((res : any) => {
			messageTempLoading.value = false;
			if (res.code === 200) {
				messageTempList.value = res.rows as TemplateItem[];
				messageTempTotal.value = res.total;
				if (selectedMessageTempId.value) {
					const selectedRow = messageTempList.value.find(item => item.msgTemplateCode === selectedMessageTempId.value);
					if (selectedRow) {
						selectedMessageTempName.value = selectedRow.msgTemplateName;
					}
				}
			} else {
				message.error("获取报文模板列表失败：" + res.msg);
				messageTempList.value = [];
				messageTempTotal.value = 0;
			}
		}).catch((error : any) => {
			messageTempLoading.value = false;
			message.error("获取报文模板列表出错");
			console.error(error);
		});
	};

	// ---------------------- 唯一性判断规则选择功能（去掉查询相关逻辑） ----------------------
	const uniquenessRoleModalVisible = ref<boolean>(false);
	// 移除搜索表单引用和搜索表单数据
	interface UniqueTemplateItem {
		tempId : string;
		tempName : string;
	}
	const uniquenessRoleList = ref<UniqueTemplateItem[]>([]);
	const uniquenessRolePageNum = ref(1);
	const uniquenessRolePageSize = ref(10);
	const uniquenessRoleTotal = ref(0);
	const uniquenessRoleLoading = ref(false);
	const selectedUniquenessRoleId = ref<string>("");
	const selectedUniquenessRoleName = ref<string>("");

	const uniquenessRoleColumns = ref([
		{ title: "模板编号", dataIndex: "tempId", key: "tempId", width: 150 },
		{ title: "模板名称", dataIndex: "tempName", key: "tempName", width: 250 }
	]);

	// 关闭唯一性判断规则选择弹窗
	const handleUniquenessRoleCancel = () => {
		uniquenessRoleModalVisible.value = false;
	};

	// 加载列表（移除搜索参数）
	const fetchUniquenessRoleList = () => {
		uniquenessRoleLoading.value = true;
		const params = {
			// 去掉搜索条件参数，仅保留分页和必要筛选
			pageNum: uniquenessRolePageNum.value,
			pageSize: uniquenessRolePageSize.value,
			channelId: stepForm.channelId
		};
		uniquenessRoleListQuery(params).then((res : any) => {
			uniquenessRoleLoading.value = false;
			if (res.code === 200) {
				uniquenessRoleList.value = res.rows as UniqueTemplateItem[];
				uniquenessRoleTotal.value = res.total;
				if (selectedUniquenessRoleId.value) {
					const selectedRow = uniquenessRoleList.value.find(item => item.tempId === selectedUniquenessRoleId.value);
					if (selectedRow) {
						selectedUniquenessRoleName.value = selectedRow.tempName;
					}
				}
			} else {
				message.error("获取唯一性判断规则列表失败：" + res.msg);
				uniquenessRoleList.value = [];
				uniquenessRoleTotal.value = 0;
			}
		}).catch((error : any) => {
			uniquenessRoleLoading.value = false;
			message.error("获取唯一性判断规则列表出错");
			console.error(error);
		});
	};

	// 分步表单相关变量（修改验证逻辑）
	const stepModalRef = ref<FormInstance>();
	const stepVisible = ref<boolean>(false);
	const currentStep = ref(0);
	const currentAction = ref<'add' | 'edit'>('add');

   // 新增：同步验证状态（用于按钮禁用逻辑，避免Promise类型问题）
   const isCurrentStepValidSync = ref(false);
   // 新增：标识是否为首次加载当前步骤（用于跳过初始验证）
   const isFirstLoadCurrentStep = ref<boolean[]>([true, true, true, true]); // 关键新增

	// 分步表单数据（与FormValues接口一致）
	interface StepFormValues {
		id : string;
		productCode : string;
		productName : string;
		channelId : string;
		bizType : string;
		confirmMode : string;
		clearingMode : string;
		interestRate : string;
		interestCurrency : string;
		settlementCurrency : string;
		settleScene : string;
		accessMethod : string;
		holidayType : string;
		holidayRule : string;
		isSummerTime : string;
		abnolmalAlert : string;
		abnolmalAlertRole : string;
		isConfirm : string;
		isClearing : string;
		messageTemp : string;
		uniquenessRole : string;
		priority : string;
	}

	const stepForm = reactive<StepFormValues>({
		id: "",
		productCode: "",
		productName: "",
		channelId: "",
		bizType: "",
		confirmMode: "",
		clearingMode: "",
		interestRate: "",
		interestCurrency: "",
		settlementCurrency: "",
		settleScene: "",
		accessMethod: "",
		holidayType: "",
		holidayRule: "",
		isSummerTime: "",
		abnolmalAlert: "",
		abnolmalAlertRole: "",
		isConfirm: "",
		isClearing: "",
		messageTemp: "",
		uniquenessRole: "",
		priority: ""
	});
	const stepFormRef = ref<FormInstance>();

	// 修复3：分步表单标题（匹配新的步骤划分）
	const getStepTitle = computed(() => {
		const titles = [
			`${currentAction.value === 'add' ? '新增' : '编辑'}监控产品-基本信息配置`,
			`${currentAction.value === 'add' ? '新增' : '编辑'}监控产品-报文模板配置`,
			`${currentAction.value === 'add' ? '新增' : '编辑'}监控产品-确认规则配置`,
			`${currentAction.value === 'add' ? '新增' : '编辑'}监控产品-清结算规则配置`
		];
		return titles[currentStep.value];
	});

	// 1. 异步验证方法（用于实际验证逻辑）
const validateCurrentStep = async (): Promise<boolean> => {
  const current = currentStep.value;
  // 按步骤定义必填字段（确保每步都有明确校验项）
  const fieldsToValidate = [
    // 步骤1：产品基本信息（4个必填项）
    ['productCode', 'productName', 'channelId', 'bizType'],
    // 步骤2：报文模板配置（2个必填项）
    ['messageTemp', 'uniquenessRole'],
    // 步骤3：确认规则配置（5个必填项）
    ['confirmMode', 'interestRate', 'interestCurrency', 'settlementCurrency', 'isConfirm'],
    // 步骤4：清结算规则配置（9个必填项）
    ['clearingMode', 'settleScene', 'accessMethod', 'holidayType', 'holidayRule', 'isSummerTime', 'abnolmalAlert', 'isClearing', 'priority']
  ][current];

  try {
    // 核心逻辑：每次点击下一步都重新校验当前步骤所有必填项
    await stepFormRef.value?.validateFields(fieldsToValidate);
    isCurrentStepValidSync.value = true; // 校验通过：启用下一步
    return true;
  } catch (error) {
    // 校验失败：打印错误信息（便于调试）
    isCurrentStepValidSync.value = false; // 校验失败：禁用下一步    
    console.error(`第${current+1}步校验失败：`, error);
    return false;
  }
};
	// 2. 监听步骤变化，自动验证当前步骤（确保按钮禁用状态正确）
watch(currentStep, async (newStep, oldStep) => {
  // 标记旧步骤为非首次加载
  if (oldStep !== undefined) {
    isFirstLoadCurrentStep.value[oldStep] = false;
  }
  // 验证新步骤，同步更新按钮状态
  await validateCurrentStep();
  triggerStepBarRedraw();
});

watch(
  () => stepForm,
  async (newVal, oldVal) => {
    if (stepVisible.value) { // 仅在弹窗显示时触发
      const current = currentStep.value;
      // 实时校验当前步骤必填项，同步更新按钮状态
      await validateCurrentStep();
    }
  },
  { deep: true } // 深度监听对象变化
);
	// 修复：isStepValid 改为同步判断（用于弹窗右上角按钮禁用）
	const isStepValid = computed(() => {
		return currentStep.value === 3 && isCurrentStepValidSync.value;
	});

	// 修复5：新增分步弹窗事件（初始化时触发验证）
	const showAddStepModal = () => {
		currentAction.value = 'add';
		currentStep.value = 0;
		// 重置分步表单
		stepFormRef.value?.resetFields();
		// 清空所有表单数据
		Object.keys(stepForm).forEach(key => {
			stepForm[key as keyof StepFormValues] = "";
		});
		// 清空模板选择状态
		selectedMessageTempId.value = "";
		selectedMessageTempName.value = "";
		selectedUniquenessRoleId.value = "";
		selectedUniquenessRoleName.value = "";
    isCurrentStepValidSync.value = false; // 初始状态：禁用下一步（必填项未填）  
		// 显示弹窗
    stepVisible.value = true;
    setTimeout(() => {
      triggerStepBarRedraw();
      validateCurrentStep();
    }, 200); // 延迟200ms，适配弹窗动画
  };

// 修复6：编辑分步弹窗事件（加载数据后触发验证）
const showEditStepModal = () => {
	if (selectedRowKeys.value.length > 1) {
		message.error("仅能选择一条记录进行操作");
		return;
	}
	if (selectedRowKeys.value.length === 0) {
		message.error("请选择一条记录进行操作");
		return;
	}

	currentAction.value = 'edit';
	currentStep.value = 0;
	const rowData = selectedRows.value[0];

	// 批量转换枚举字段
	const convertedData = {
		...rowData,
		bizType: convertDictValue('biz_type', rowData.bizType, bizTypeList.value),
		confirmMode: convertDictValue('confirm_mode', rowData.confirmMode, confirmModeList.value),
		clearingMode: convertDictValue('clearing_mode', rowData.clearingMode, clearingModeList.value),
		interestRate: convertDictValue('confirm_rate', rowData.interestRate, interestRateList.value),
		settleScene: convertDictValue('settle_scene', rowData.settleScene, settleSceneList.value),
		holidayType: convertDictValue('holiday_type', rowData.holidayType, holidayTypeList.value),
		holidayRule: convertDictValue('holiday_rule', rowData.holidayRule, holidayRuleList.value),
		isSummerTime: convertDictValue('is_summer_time', rowData.isSummerTime, isSummerTimeList.value),
		abnolmalAlert: convertDictValue('abnolmal_alert', rowData.abnolmalAlert, abnolmalAlertList.value),
		abnolmalAlertRole: convertDictValue('abnolmal_alert_role', rowData.abnolmalAlertRole, abnolmalAlertRoleList.value),
		isConfirm: convertDictValue('is_confirm', rowData.isConfirm, isConfirmList.value),
		isClearing: convertDictValue('is_clearing', rowData.isClearing, isClearingList.value)
	};
	// 赋值到分步表单
	Object.assign(stepForm, convertedData);
	// 同步模板选择状态
	selectedMessageTempId.value = stepForm.messageTemp;
	selectedUniquenessRoleId.value = stepForm.uniquenessRole;
	isCurrentStepValidSync.value = false; // 初始状态：禁用下一步（必填项未填）
	stepVisible.value = true;
	// 优化：延迟触发重绘
	setTimeout(() => {
		triggerStepBarRedraw();
		validateCurrentStep();
	}, 200);
};

// 上一步方法修改
const prevStep = () => {
	if (currentStep.value > 0) {
		currentStep.value--;
		// 无需手动修改状态，watch(currentStep) 会自动触发验证
	}
};

// 下一步方法修改
const nextStep = async () => {
	const current = currentStep.value;
	const stepTitles = ['产品基本信息配置', '报文模板配置', '确认规则配置', '清结算规则配置'];
	// 强制重新校验当前步骤（无免校验）
	const isValid = await validateCurrentStep();
	if (isValid) {
		// 校验通过：切换到下一步
		if (current < 3) {
			currentStep.value++;
			message.success(`已通过【${stepTitles[current]}】校验，进入第 ${currentStep.value + 1} 步`);
			triggerStepBarRedraw();
		}
	} else {
		// 校验失败：明确提示用户，不切换步骤
		message.warning(`【${stepTitles[current]}】存在未完成的必填项或填写错误，请检查并修正后再继续`);
	}
};

// 新增：步骤条重绘工具函数
const triggerStepBarRedraw = () => {
	nextTick(() => {
		const stepBar = document.querySelector('.step-bar') as HTMLElement | null;
		if (stepBar) {
			// 通过修改样式触发重绘，解决样式不更新问题
			stepBar.style.display = 'none';
			stepBar.offsetHeight; // 强制浏览器重排
			stepBar.style.display = 'flex';
		}
	});
};  
	// 修复8：分步表单确认提交（强化验证逻辑）
	const handleStepOk = async () => {
		// 提交前再次全量验证所有步骤的必填字段
		const allFields = [
			...['productCode', 'productName', 'channelId', 'bizType'],
			...['messageTemp', 'uniquenessRole'],
			...['confirmMode', 'interestRate', 'interestCurrency', 'settlementCurrency', 'isConfirm'],
			...['clearingMode', 'settleScene', 'accessMethod', 'holidayType', 'holidayRule', 'isSummerTime', 'abnolmalAlert', 'isClearing', 'priority']
		];

		try {
			await stepFormRef.value?.validateFields(allFields);

			// 验证通过，提交数据
			if (currentAction.value === 'add') {
				const res = await add(stepForm);
				if (res.code === 200) {
					Modal.success({ title: res.msg });
				} else {
					Modal.error({ title: res.msg });
				}
			} else {
				const res = await edit(stepForm);
				if (res.code === 200) {
					Modal.success({ title: res.msg });
				} else {
					Modal.error({ title: res.msg });
				}
			}

			stepVisible.value = false;
			handleSearch(); // 刷新列表
		} catch (error) {
			console.error("表单验证失败：", error);
			message.error("请完成所有必填项后再提交");
		}
	};

	// 修复9：取消分步表单（重置验证状态）
	const handleStepCancel = () => {
		stepVisible.value = false;
		currentStep.value = 0;
		isCurrentStepValidSync.value = false; // 重置验证状态 
		stepFormRef.value?.resetFields();
	};


	// 修复10：模板选择弹窗的表单数据同步（改为同步到分步表单）
	const handleMessageTempConfirm = () => {
		if (!selectedMessageTempId.value) {
			message.warning("请选择一条模板记录");
			return;
		}
		// 回显到分步表单
		stepForm.messageTemp = selectedMessageTempId.value;
		messageTempModalVisible.value = false;
	};

	const handleUniquenessRoleConfirm = () => {
		if (!selectedUniquenessRoleId.value) {
			message.warning("请选择一条规则记录");
			return;
		}
		// 回显到分步表单
		stepForm.uniquenessRole = selectedUniquenessRoleId.value;
		uniquenessRoleModalVisible.value = false;
	};

	// 修复11：模板选择弹窗的初始选中状态（从分步表单获取）
	const showMessageTempModal = () => {
		messageTempPageNum.value = 1;
		// 从分步表单获取当前值
		if (stepForm.messageTemp) {
			selectedMessageTempId.value = stepForm.messageTemp;
		}
		messageTempModalVisible.value = true;
		fetchMessageTempList();
	};

	const showUniquenessRoleModal = () => {
		uniquenessRolePageNum.value = 1;
		// 从分步表单获取当前值
		if (stepForm.uniquenessRole) {
			selectedUniquenessRoleId.value = stepForm.uniquenessRole;
		}
		uniquenessRoleModalVisible.value = true;
		fetchUniquenessRoleList();
	};
	onMounted(() => {
		searchLoading.value = false;
		fetchPriorityList(priorityList, priorityLoading);
		fetchCurrencyList(currencyList, currencyLoading);
		fetchTransChannelList(transChannelList, transChannelLoading);
		fetchDictData("biz_type", bizTypeList, bizTypeLoading);//业务类型
		fetchDictData("confirm_mode", confirmModeList, confirmModeLoading);//确认方式
		fetchDictData("clearing_mode", clearingModeList, clearingModeLoading);//清算方式
		fetchDictData("confirm_rate", interestRateList, interestRateLoading);//起息速度
		fetchDictData("settle_scene", settleSceneList, settleSceneLoading);//清结算场景
		fetchDictData("holiday_type", holidayTypeList, holidayTypeLoading);//节假日类型 
		fetchDictData("holiday_rule", holidayRuleList, holidayRuleLoading);//节假日顺延规则   
		fetchDictData("is_summer_time", isSummerTimeList, isSummerTimeLoading); // 是否夏令时
		fetchDictData("abnolmal_alert", abnolmalAlertList, abnolmalAlertLoading);//异常提醒 
		fetchDictData("abnolmal_alert_role", abnolmalAlertRoleList, abnolmalAlertRoleLoading);//异常提醒规则   
		fetchDictData("is_confirm", isConfirmList, isConfirmLoading);//是否需要确认
		fetchDictData("is_clearing", isClearingList, isClearingLoading);//是否需要清算
		// 初始化时加载列表数据
		setTimeout(() => {
		  handleSearch();
		}, 500);
	});
</script>
<script lang="ts">
	import {
		AppstoreAddOutlined,
		FormOutlined,
	} from "@ant-design/icons-vue";

	export default {
		name: "userConfig",
		components: {
			AppstoreAddOutlined,
			FormOutlined,
		},
	};
</script>

<style type="less" scoped>
	/* .ant-form-item-label > label {
    width:150px!important;
    justify-content: end!important;
  } */
  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }
/* 关键 1：强制外层容器宽高，不依赖子元素撑开 */
.step-root {
  width: 100% !important;
  height: 120px !important;
  min-height: 120px !important;
  position: relative !important;
  overflow: visible !important;
  display: flex !important; /* 确保步骤条横向排列 */
  align-items: center !important; /* 垂直居中 */
}

/* 关键 2：穿透 scoped，强制步骤条根节点渲染 */
:deep(.step-bar) {
  display: flex !important; /* 强制弹性布局 */
  width: 100% !important;
  height: 100% !important;
  visibility: visible !important;
  position: relative !important;
  overflow: visible !important;
  align-items: flex-start !important; /* 避免垂直压缩 */

  /* 强制步骤容器渲染（解决 ant-design-vue 内部布局塌陷） */
  .ant-steps-navigation {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* 关键 3：强制 a-step 根节点宽高（彻底解决 0*0） */
  .ant-steps-item.step-item {
    flex: 1 !important; /* 均分宽度 */
    width: 25% !important; /* 4个步骤固定占比 */
    height: 100% !important;
    min-height: 180px !important; /* 最小高度兜底 */
    position: relative !important;
    text-align: center !important;
    display: flex !important; /* 强制块级渲染 */
    flex-direction: column !important; /* 纵向排列子元素 */
    align-items: center !important; /* 子元素居中 */

    /* 自定义连接线（伪元素，穿透后生效） */
    &:not(:last-child)::after {
      content: '';
      position: absolute !important;
      top: 46px !important;
      left: 50% !important;
      width: 100% !important;
      height: 2px !important;
      z-index: 0 !important;
      background-color: #d9d9d9 !important;
    }

    /* 已完成步骤 - 彻底去横杠 */
    &.ant-steps-item-finish {
      &:not(:last-child)::after { background-color: #52c41a !important; }
      .ant-steps-item-icon {
        background-color: #52c41a !important;
        border-color: #52c41a !important;
        color: #fff !important;
        /* 完全清空默认伪元素内容（关键修复） */
        &::before { content: none !important; }
        &::after {
          content: '' !important; /* 不显示数字，纯纯色圆点 */
        }
      }
      .ant-steps-item-title { color: #52c41a !important; }
    }

    /* 当前步骤 - 彻底去横杠 */
    &.ant-steps-item-process {
      &:not(:last-child)::after { background-color: #52c41a !important; }
      .ant-steps-item-icon {
        background-color: #fff !important;
        border-color: #52c41a !important;
        color: #52c41a !important;
        border-width: 2px !important;
        transform: scale(1.1);
        /* 完全清空默认伪元素内容（关键修复） */
        &::before { content: none !important; }
        &::after { content: '' !important; }
      }
      .ant-steps-item-title { color: #52c41a !important; font-weight: 600; }
    }

    /* 待进行步骤 - 彻底去横杠 */
    &.ant-steps-item-wait {
      .ant-steps-item-icon {
        background-color: #f5f5f5 !important;
        border-color: #d9d9d9 !important;
        color: #bfbfbf !important;
        /* 完全清空默认伪元素内容（关键修复） */
        &::before { content: none !important; }
        &::after { content: '' !important; }
      }
      .ant-steps-item-title { color: #bfbfbf !important; }
    }

    /* 强制子元素渲染（圆点、标题、描述） */
    .ant-steps-item-icon {
      width: 36px !important;
      height: 36px !important;
      line-height: 36px !important;
      font-size: 18px !important;
      margin: 0 0 8px 0 !important; /* 与标题间距 */
      z-index: 1 !important;
      position: relative !important;
      /* 额外保险：隐藏所有伪元素 */
      overflow: hidden !important;
    }

    .ant-steps-item-title {
      font-size: 14px !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      width: 90% !important;
      margin-bottom: 4px !important;
    }

    .ant-steps-item-description {
      font-size: 12px !important;
      color: rgba(0,0,0,0.45) !important;
      width: 90% !important;
    }

    /* 隐藏组件自带连接线 */
    .ant-steps-item-tail { display: none !important; }
  }
}

/* 弹窗内容区域：确保不遮挡步骤条 */
:deep(.ant-modal-body) {
  padding: 0 24px !important;
  overflow: visible !important;
  min-height: 600px !important;
}

/* 步骤标签垂直排列时，强制不换行 */
:deep(.ant-steps-label-vertical .ant-steps-item-content) {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* 移除之前的 data-step 绑定（避免干扰） */
:deep(.ant-steps-item-step-0 .ant-steps-item-icon),
:deep(.ant-steps-item-step-1 .ant-steps-item-icon),
:deep(.ant-steps-item-step-2 .ant-steps-item-icon),
:deep(.ant-steps-item-step-3 .ant-steps-item-icon) {
  data-step: "" !important;
}

/* 彻底禁用所有步骤图标伪元素（终极修复） */
:deep(.ant-steps-item-icon::before),
:deep(.ant-steps-item-icon::after) {
  display: none !important;
}

/* 修复步骤切换时的样式过渡 */
:deep(.ant-steps-item) {
  transition: all 0.3s ease !important;
}
</style>